<template>
	<view>
		<view class="page-vip">
			<view class="header">
				<!-- 头部背景 -->
				<image class="headerBg" src="@/static/images/vip/header.png" mode=""></image>
				
				<!-- 自定义导航 -->
				<cl-topbar title="至尊会员" background-color="rgba(0,0,0,0)" color="#FFFFFF" :border="false"></cl-topbar>
				
				<!-- 个人信息 -->
				<view class="info">
					<cl-avatar
						:src="User.userinfo.user_icon"
						shape="circle"
						:size="92"
					></cl-avatar>
					<view class="right">
						<view class="name">
							<cl-text :size="28" :value="User.userinfo.username" color="#1E1E1E" bold></cl-text>
						</view>
						
						<template v-if="User.userinfo.is_vip==0">
							<cl-text :size="24" value="当前未开通超级VIP,立即开通尊享服务" color="#262626" block></cl-text>
						</template>
						<template v-else>
							<cl-text :size="24" value="已开通VIP" color="#262626" block></cl-text>
						</template>	
					</view>
				</view>
			</view>
			

			<view class="container">
				<!-- 套餐 -->
				<view class="list">
					<cl-row :gutter="18">
						<cl-col span="8" v-for="(item, index) in list" :key="index">
							<view class="item" @click="chooseMeal(item.id, item.price)" :class="{'choose-meal':item.id==chooseMealId}">
								<view class="group">
									<cl-text :size="32" :value="item.label" color="#C19149"></cl-text>
								</view>
								<view class="group martb">
									<cl-text :size="32" value="￥" color="#CE9857"></cl-text>
									<cl-text :size="56" :value="item.price" color="#CE9857"></cl-text>
								</view>
								<view class="tip" v-if="item.tip">
									<cl-text :size="24" :value="item.tip" color="#FFFFFF"></cl-text>
								</view>
							</view>
						</cl-col>
					</cl-row>
				</view>
				
				<!-- 说明 -->
				<view class="desc">
					<view class="title">
						<cl-text :size="24" value="会员开通说明" color="#232323"></cl-text>
					</view>
					<cl-text :size="24" value=" ①打招呼,发动态无限制" color="#8A8A8A" block></cl-text>
					<cl-text :size="24" value=" ②拥有尊贵的VIP皇冠标志,会有更多人打招呼哦" color="#8A8A8A" block></cl-text>
					<cl-text :size="24" value=" ③优先推荐给更多人" color="#8A8A8A" block></cl-text>
					<cl-text :size="24" value=" 客服QQ:1519433730" color="#8A8A8A" block></cl-text>
				</view>
				
				<!-- 支付方式-->
				<view class="pay-method" v-show="platform!='ios'">
					<view class="title">支付方式</view>
					<view class="pay-method-item" v-if="wxPay==1">
						<view class="pay-method-item-left">
							<image src="@/static/images/vip/weixin.png"></image>
							<text>微信支付</text>
						</view>
						<radio value="0" :checked="payMethod==0" @click="choosePayMethod()"/>
					</view>
					<view class="pay-method-item" v-if="aliPay==1">
						<view class="pay-method-item-left">
							<image src="@/static/images/vip/ali.png"></image>
							<text>支付宝支付</text>
						</view>
						<radio value="1" :checked="payMethod==1" @click="choosePayMethod()"/>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="footer">
			<view class="pay">
				<view>
					<cl-text :size="40" :value="'¥'+price" color="#CE9857" block></cl-text>
				</view>
				<view class="btn" @click="pay()">
					立即支付
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: require('@/static/images/vip/avatar1.png'),
				list: [],
				chooseMealId: 1,
				payMethod: 0,
				wxPay: 1,
				aliPay: 1,
				price:0,
				platform: "android",
				iosPayMeal: "cpmonth",
			};
		},
		onShow() {
			this.getPlatform()
			this.$http.get('vip/getmeal').then((res) => {
				let [err, ret] = res
				// console.log("套餐列表:" + JSON.stringify(ret));
				if (!this.$http.errorCheck(err,ret)){
					uni.showToast({ title: '数据获取失败' });
					return [];
				}
				
				this.list = ret.data.data.list
				this.wxPay = ret.data.data.wx_pay
				this.aliPay = ret.data.data.ali_pay
				if(this.wxPay == 0){
					this.payMethod = 1
				}
				if(this.aliPay == 0){
					this.payMethod = 0
				}
				this.price = this.list[0].price
				this.chooseMealId = ret.data.data.list[0].id
			});
		},
		methods: {
			getPlatform(){
				let that = this
				uni.getSystemInfo({
					success: function (res) {
						if(res.osName == "ios"){
							that.platform = "ios";
							that.payMethod = 2
						}
					}
				});
			},
			applePay(){
				var iap = null;  //保存应用内支付对象
				var productid = null;
				var that = this;
				if(this.chooseMealId == 1){
					productid = "cpmonth"
				}else if(this.chooseMealId == 2){
					productid = "cpquarter"
				}else if(this.chooseMealId == 3){
					productid = "cpyear"
				}
				
				this.$http.post("vip/createorder", {'meal_id': this.chooseMealId, 'pay_method': this.payMethod}).then((res)=>{
					let [err, ret] = res
					console.log("套餐列表:" + JSON.stringify(ret));
					if (!this.$http.errorCheck(err,ret)){
						uni.showToast({ title: '数据获取失败' });
						return [];
					}
					
					uni.requestPayment({
					    provider: "appleiap",
					    orderInfo: {
							productid: productid
						}, 
					    success: (res) => {
					        console.log('success:' + JSON.stringify(res));
							
							//支付成功后，提交到后台进行验证
							this.$http.post('vip/payReply',{"order_no": ret.data.data.order_no, 
							"pay_method":this.payMethod, "pay_data":[], "meal_id":this.chooseMealId},{"debug":0}).then((res)=>{
								let [err, ret] = res;
								console.log("支付结果2:" + JSON.stringify(ret));
								if (!this.$http.errorCheck(err,ret)){
									uni.showToast({ title: '数据获取失败' });
									return;
								}
								uni.showToast({ title: '支付成功' });
								this.User.userinfo.is_vip = 1;
								uni.setStorageSync("userinfo", this.User.userinfo);
							});
							
					    },
					    fail: (err) => {
							this.$http.post('log/applePayError',{"data": JSON.stringify(err)})
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				})
				
				return;
				
				
				this.$http.post("vip/createorder", {'meal_id': this.chooseMealId, 'pay_method': this.payMethod}).then((res)=>{
					let [err, ret] = res
					if (!this.$http.errorCheck(err,ret)){
						uni.showToast({ title: '数据获取失败' });
						return [];
					}
					
					plus.payment.getChannels(function(channels){
					    for (var i in channels) {
					        var channel = channels[i];
					        // 获取 id 为 'appleiap' 的 channel  
					        if (channel.id === 'appleiap') {
					            iap = channel;
					        }
					    }
						
						// ids 数组中的项为 App Store Connect 配置的内购买项目产品ID（productId）
						var ids = ['cpmonth', 'cpquarter', 'cpyear'];
						// iap 为应用内支付对象 
						iap.requestOrder(ids, function(e) {  
						    // 获取订单信息成功回调方法  
						    console.log('requestOrder success: ' + JSON.stringify(e));
							
							plus.payment.request(iap, {
							    productid: productid,
							  }, function(result){
							    // 支付成功，result 为 IAP商品交易信息对象 IAPTransaction 需将返回的支付凭证传给后端进行二次认证 
								 console.log(result)
								 
								 //支付成功后，提交到后台进行验证
								 this.$http.post('vip/payReply',{"order_no": ret.data.data.order_no, 
								 "pay_method":this.payMethod, "pay_data":[], "meal_id":this.chooseMealId},{"debug":0}).then((res)=>{
								 	let [err, ret] = res;
								 	console.log("支付结果2:" + JSON.stringify(ret));
								 	if (!this.$http.errorCheck(err,ret)){
								 		uni.showToast({ title: '数据获取失败' });
								 		return;
								 	}
								 	uni.showToast({ title: '支付成功' });
								 	this.User.userinfo.is_vip = 1;
								 	uni.setStorageSync("userinfo", this.User.userinfo);
								 });
							  }, function(e){
								// 支付失败 返回错误信息
								this.$http.post('log/applePayError',{"data": JSON.stringify(e)})
								console.log(e)
							});
							
						  }, function(e) {
						    // 获取订单信息失败回调方法  
							this.$http.post('log/applePayError',{"data": JSON.stringify(e)})
						    console.log('requestOrder failed: ' + JSON.stringify(e));
						});
					  }, function(e){
					    console.log("获取iap支付通道失败：" + e.message);
					});
				})
			},
			pay(){
				if(this.platform == "ios"){
					this.applePay()
				}else{
					this.androidPay()
				}
			},
			androidPay(){
				this.$http.post("vip/createorder", {'meal_id': this.chooseMealId, 'pay_method': this.payMethod}).then((res)=>{
					let [err, ret] = res
					console.log("套餐列表:" + JSON.stringify(ret));
					if (!this.$http.errorCheck(err,ret)){
						uni.showToast({ title: '数据获取失败' });
						return [];
					}
					let provider = "wxpay";
					if(this.payMethod == 1){
						provider = "alipay";
					}
					
					uni.requestPayment({
					    provider: provider,
					    orderInfo: ret.data.data.data, //微信、支付宝订单数据
					    success: (res) => {
					        console.log('success:' + JSON.stringify(res));
							
							//支付成功后，提交到后台进行验证
							this.$http.post('vip/payReply',{"order_no": ret.data.data.order_no, 
							"pay_method":this.payMethod, "pay_data":res.rawdata, "meal_id":this.chooseMealId},{"debug":0}).then((res)=>{
								let [err, ret] = res;
								console.log("支付结果2:" + JSON.stringify(ret));
								if (!this.$http.errorCheck(err,ret)){
									uni.showToast({ title: '数据获取失败' });
									return;
								}
								uni.showToast({ title: '支付成功' });
								this.User.userinfo.is_vip = 1;
								uni.setStorageSync("userinfo", this.User.userinfo);
							});
							
					    },
					    fail: (err) => {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				})
			},
			chooseMeal(id, price){
				this.chooseMealId = id
				this.price = price
			},
			choosePayMethod(){
				if(this.payMethod == 0){
					this.payMethod = 1
				}else{
					this.payMethod = 0
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
	}
	
	.page-vip {
		height: 90vh;
		overflow: scroll;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		//min-height: 100vh;
		position: relative;
		.header {
			position: relative;
			width: 100%;
			height: 422rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 44rpx;
			.headerBg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.info {
				position: relative;
				z-index: 2;
				width: 100%;
				height: 180rpx;
				box-sizing: border-box;
				padding: 0 60rpx;
				display: flex;
				align-items: center;
				.right {
					margin-left: 24rpx;
					.name {
						.cl-text {
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
		
		.container {
			flex: 1;
			padding: 0 32rpx;
			.list {
				margin-bottom: 48rpx;
				
				.cl-col {
					.choose-meal {
						background: #FFF5E9 !important;
						border: 1px solid #BB7D32;
					}
					
					.item {
						background-color: #FFFFFF;
						border-radius: 12rpx;
						padding: 45rpx 21rpx;
						position: relative;
						.group{
							text-align: center;
						}
						
						.martb {
							margin: 10rpx 0;
						}
						
						.tip {
							background: #CE9857;
							border-radius: 0 12rpx 0 12rpx;
							position: absolute;
							top: -15rpx;
							right: -2rpx;
							padding: 2rpx 10rpx;
							display: flex;
							align-items: center;
						}
					}
				}
			}
			
			.pay-method{
				background-color: #FFFFFF;
				padding: 32rpx;
				.title{
					font-weight: bold;
					border-bottom: 1rpx solid #f0f0f0;
					padding-bottom: 10rpx;
				}
				.pay-method-item{
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.pay-method-item-left{
						image{
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
						}
						display: flex;
						align-items: center;
					}
				}
				
			}
			
			.desc {
				margin-bottom: 48rpx;
				.title {
					margin-bottom: 12rpx;
				}
				
				.list {
					display: flex;
					justify-content: flex;
					.item {
						height: 130rpx;
						width: 334rpx;
						position: relative;
						display: flex;
						align-items: center;
						&:first-child {
							margin-right: 19rpx;
						}
						
						image {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							z-index: 1;
						}
						.price {
							position: relative;
							z-index: 2;
							width: 130rpx;
							text-align: center;
							margin-right: 25rpx;
						}
						.right {
							position: relative;
							z-index: 2;
						}
					}
				}
			}
		}
		
	}
	
	.footer {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		box-sizing: border-box;
		height: 10vh;
		.pay {
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price {
				flex: 1;
			}
			.btn {
				width: 208rpx;
				height: 88rpx;
				background: linear-gradient(262deg, #F9D9B3 0%, #DCB281 100%);
				box-shadow: 0 3rpx 6rpx rgba(118, 11, 11, 0.19);
				border-radius: 10rpx;
				color: #8F5D23;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
	}
</style>
